{% extends "home-1.html" %}
{% load static %}
{% block main %}
    <main class="surface-main">
        <div class="container grid-lg">
            <div class="surface-content">
                <div class="surface-options">
                    <a class="surface-option-item" href="/" title="只看可以购买 Surface 官翻设备">
                        <div class="form-checkbox">
                            <input type="checkbox" checked>
                            <i class="form-icon"></i> 只看有货
                        </div>
                    </a>
                </div>
                <div class="surface-list">
                    {% for i in product_list %}
                        {% if i.Y == '有货' %}
                            {% if i.产品 == 'Mac mini ' %}
                                <a class="surface-item in-stock {{ i.产品 }} {{ i.cpu }} {{ i.内存 }} {{ i.容量 }} {{ i.颜色 }} {{ i.尺寸 }}"
                                   href="https://www.apple.com/cn/shop/product/{{ i.ID }}/A"
                                   target="_blank" rel="noopener">
                                <div class="surface-name">{{ i.产品 }}/{{ i.年份 }}</div>
                                <div class="surface-desc"> {{ i.cpu }}/{{ i.内存 }}/{{ i.容量 }}</div>
                                <div class="surface-price">RMB &nbsp;{{ i.价格 }}</div>
                                <div class="surface-action">
                                    <div class="btn btn-sm btn-primary">可购买</div>
                                </div>
                            {% else %}
                                <a class="surface-item in-stock {{ i.产品 }} {{ i.cpu }} {{ i.内存 }} {{ i.容量 }} {{ i.颜色 }} {{ i.尺寸 }}"
                                   href="https://www.apple.com/cn/shop/product/{{ i.ID }}/A"
                                   target="_blank" rel="noopener">
                                <div class="surface-name">{{ i.产品 }}/{{ i.年份 }}</div>
                                <div class="surface-desc"> {{ i.尺寸 }}寸/{{ i.cpu }}/{{ i.内存 }}/{{ i.容量 }}/{{ i.颜色 }}/{{ i.显卡 }}</div>
                                <div class="surface-price">RMB &nbsp;{{ i.价格 }}</div>
                                <div class="surface-action">
                                    <div class="btn btn-sm btn-primary">可购买</div>
                                </div>
                            {% endif %}
                        {% endif %}
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </main>
{% endblock %}
